<template>
    <div class="perkins-w">
            <div class="filtrateTab border-bottom-1px">
                <div class="filtrate-tab-item" v-for="(item, index) in tabParams" @click="showDrop(index,true)" v-bind:class="{'active':isAcitve==index}" >
                    <span>{{item}}<i class="mint-cell-allow-donw"></i></span>
                </div>
            </div>
            <div class="drop" v-show="dropShow">
                <div class="mask-black" @click="showDrop(null,false)"></div>
                <ul><li v-for="(item, index) in showDrorams" class="dropitem border-bottom-1px" v-bind:class="{'act':filterKey[isAcitve] === item}" @click="filtrate(item,index)">{{item}}</li></ul>
            </div>
        <div class="loading-container" v-show="!proList.length">
            <loading :desc="loadingDesc" :showimg="loadingShowimg"></loading>
        </div>

        <!-- content -->
          <div class="perkins-list" ref="partsw">
            <div>
              <!-- 列表 -->
              <div class="page-cell">
                    <a :href="'./perkinsdetails.html?ptype=perkinsIndustriaDetail&id=' + item.id" class="border-bottom-1px mint-cell" v-for="(item, index) in proList">
                    <span class="mint-cell-mask"></span>
                    <div class="mint-cell-con">
                         <img @load="loadImage" v-lazy="item.photo" class="part-img">
                         <span class="mint-cell-text">
                                <strong>型号：{{item.model}}</strong>
                                <span>排放标准：{{item.emissionStandard}}</span>
                                <span>功率：{{item.power}}</span>
                                <span>转速：{{item.speed}}</span>
                         </span>
                    </div>
                </a>              
                </div>
              <!-- 
                1、底部提示信息 
                2、这里有一种情况,就是没有更多数据时,这里的文本应该显示"暂无更多数据"
              -->
              <div class="bottom-tip" v-show="proList.length">
                <span class="loading-hook">{{bottomTip}}</span>
              </div>
            </div>
          </div>
          <!-- content end  -->
    </div>
</template>

<script type="text/ecmascript-6">
    import Loading from 'components/loading/loading';
    import BScroll from 'better-scroll';
    import apiUrl from '../../../config/api';
    import axios from 'axios';
    var tempArr = ['型号类别', '排放标准', '功率', '转速'];
    export default {
        data() {
            return {
                getDropParams: {},
                loadingDesc: '正在载入...',
                loadingShowimg: true,
                filterKey: ["", "", "", ""],
                topTip: '下拉刷新',
                bottomTip: '查看更多',
                pageSize: 10,
                pageIndex: 1,
                pageCount: 0,
                proList: [], // 展现数据
                isAcitve: null,
                tabParams: ['型号类别', '排放标准', '功率', '转速'],
                showDrorams: [],                    
                dropShow: false
            }
        },
        created() {
            this._getdata();
            this.$nextTick(() => {
                this._initScroll();
            })
        },
        methods: {
            photourl(argument) {
                let resdata = argument;
                for (var i = resdata.length - 1; i >= 0; i--) {
                    let photo = resdata[i].photo;
                    photo = photo.split("|");
                    resdata[i].photo = photo[1]
                }
                return resdata;
            },
            _initScroll() {
                this.PartListScroll = new BScroll(this.$refs.partsw, {
                    click: true
                });
                var _this = this;
                this.PartListScroll.on('touchend', function(position){
                    if(position.y < (this.maxScrollY - 30)) {
                        _this.bottomTip = '加载中...';
                        setTimeout(function () {
                            if(_this.pageCount >= _this.pageIndex){

                                _this.pageIndex += 1;
                                _this._getdata();
                                // 加载更多后,重新计算滚动区域高度
                                _this.PartListScroll.refresh();
                                _this.bottomTip = '查看更多';
                            }
                            _this.bottomTip = '暂无更多数据';
                        }, 1000);
                    }else {
                        _this.bottomTip = '查看更多';
                    }
                });
                
            },
            _getdata() {
                axios({
                    method:'get',
                    url: apiUrl.perkinsGy + '?modelCategory=' + this.filterKey[0] + '&emissionStandard=' + this.filterKey[1] + '&power=' + this.filterKey[2] + '&speed=' + this.filterKey[3] + '&pageNo=' + this.pageIndex + '&pageSize='+ this.pageSize,
                }).then(response => {
                    if (response.data.code === 'SUCCESS') {
                        if(response.data.data.list.length > 0){
                            this.photourl(response.data.data.list);
                            this.pageCount = Math.ceil(response.data.data.count / this.pageSize);
                            if(response.data.data.count < this.pageSize) {
                                this.bottomTip = '暂无更多数据';
                            }
                            for (var i = 0; i < response.data.data.list.length; i++) {
                                this.proList.push(response.data.data.list[i]);
                            }
                        } else {
                            this.loadingDesc = '该栏目下没有数据！';
                            this.loadingShowimg = false;
                        }
                        this._getField();
                    }
                });
            },
            _getField() {
                axios({
                    method:'get',
                    url: apiUrl.perkinsGyField + '?modelCategory=' + this.filterKey[0] + '&emissionStandard=' + this.filterKey[1] + '&power=' + this.filterKey[2] + '&speed=' + this.filterKey[3]
                }).then(response => {
                    response.data.data.speed.push('重新筛选');
                    response.data.data.emission_standard.push('重新筛选');
                    response.data.data.power.push('重新筛选');
                    response.data.data.model_category.push('重新筛选');
                    this.getDropParams = response.data.data;
                })
            },
            filtrate(item) {
                if(item !== '重新筛选') {
                    this.filterKey[this.isAcitve] = item;
                    this.tabParams[this.isAcitve] = item;
                } else {
                    this.filterKey[this.isAcitve] = '';
                    this.tabParams[this.isAcitve] = tempArr[this.isAcitve];
                }
                this.proList = [];
                this.pageIndex = 1;
                this._getdata();
                this.dropShow = false;
                this.isAcitve = null;
            },
            showDrop(index, isshow) {
                this.showDrorams = [];
                if(index === 0) {
                    for (var ele in this.getDropParams.model_category) {
                        this.showDrorams.push(this.getDropParams.model_category[ele]);
                    }
                }
                if(index === 1) {
                    for (var ele in this.getDropParams.emission_standard) {
                        this.showDrorams.push(this.getDropParams.emission_standard[ele]);
                    }
                }
                if(index === 2) {
                    for (var ele in this.getDropParams.power) {
                        this.showDrorams.push(this.getDropParams.power[ele]);
                    }
                }
                if(index === 3) {
                    for (var ele in this.getDropParams.speed) {
                        this.showDrorams.push(this.getDropParams.speed[ele]);
                    }
                }
                this.dropShow = isshow;
                this.isAcitve = index;
            },
            loadImage() {
                this.PartListScroll.refresh();              
            }
        },
        components: {
            Loading
        },
    }
</script>
